// 准备数据
const firstName = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章'
const secondName = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜'
const thirdName = '景行维贤克念作圣德建名立形端表正空谷传声虚堂习听祸因恶积福缘善庆尺璧非宝寸阴是竞'
const sex = '男女'
function Fn(a,b){
    return Math.floor( Math.random() * (b-a+1)+a )
}

const tableDataArr = []
for (let i = 0 ; i<=960 ; i++){
    tableDataArr.push(
        {
            orderNumber: i + 1 ,
            id: 220206101 + i ,
            name: firstName[Fn(0,39)] + secondName[Fn(0,39)] + thirdName[Fn(0,39)] ,
            age: Fn(18,25) , 
            sex: sex[Fn(0,1)] ,
            class: 2202 ,
            score: Fn(40,100)
        }
    )
}
// console.log(tableDataArr);

// 初步需求：在页面上显示1、2、3页的数据，每页60条
// 第一页：1-60           
// 第二页：61-120           
// 第三页：121-180  
// 每一页分别写for循环，如，
// for(let i = 0 ; i < 60 ; i++){}  
// for(let i = 60 ; i < 120 ; i++){}  
// for(let i = 120 ; i < 180 ; i++){}   

// 分析：上述写法代码冗余，故利用下列公式：
// 分页【起始】位置公式：起始位置 = (当前页 - 1) * 每页显示的条数    ===>    startNum = (pageNum - 1) * pageSize
// 分页【结束】位置公式：结束位置 = 起始位置 + 每页显示的条数        ===>    overNum = startNum + pageSize


// ☆☆☆在页面显示数据
let pageNum = 1                               // 当前页
let pageSize = 60                             // 每页显示的条数
let startNum = ( pageNum - 1 ) * pageSize     // 起始位置
let overNum = startNum + pageSize             // 结束位置

for(let i = startNum ; i < overNum ; i++){
    // 步骤：
    // 1、造tr标签
    let trObj = document.createElement('tr')
    // 2、修改tr的css样式
    trObj.style.textAlign = 'center'
    // 3、在tr里面放数据td【利用模板字符串（反引号拼接）】
    trObj.innerHTML = 
    `
        <tr>
            <td>${tableDataArr[i].orderNumber}</td>
            <td>${tableDataArr[i].id}</td>
            <td>${tableDataArr[i].name}</td>
            <td>${tableDataArr[i].age}</td>
            <td>${tableDataArr[i].sex}</td>
            <td>${tableDataArr[i].class}</td>
            <td>${tableDataArr[i].score}</td>
        </tr>
    `
    // 4、追加到tbody里面
    document.querySelector('tbody').appendChild(trObj)
}